<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户登录 - 固定资产管理系统</title>

    <!-- 预加载关键资源 -->
    <link rel="preload" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" as="style">
    <link rel="preload" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" as="style">

    <!-- 样式表 -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    {% load static %}
    <link href="{% static 'css/login.css' %}" rel="stylesheet">
    <link href="{% static 'css/login-mobile.css' %}" rel="stylesheet">

    <!-- Meta标签 -->
    <meta name="description" content="固定资产管理系统登录页面">
    <meta name="keywords" content="资产管理,登录,企业管理">
    <meta name="author" content="固定资产管理系统">
    <meta name="robots" content="noindex, nofollow">

    <!-- 安全相关 - 只保留可以在meta中设置的 -->
    <meta http-equiv="X-Content-Type-Options" content="nosniff">

    <!-- 主题颜色 -->
    <meta name="theme-color" content="#667eea">
    <meta name="msapplication-navbutton-color" content="#667eea">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
</head>

<body class="login-page">
    <!-- 系统状态指示器 -->
    <div class="system-status">
        <div class="status-indicator" id="statusIndicator"></div>
        <span class="status-text" id="statusText">系统正常</span>
    </div>

    <!-- 版本信息 -->
    <div class="version-info">
        v2.0.1
    </div>

    <!-- 动态背景粒子 -->
    <div class="particles">
        <div class="particle"></div>
        <div class="particle"></div>
        <div class="particle"></div>
        <div class="particle"></div>
        <div class="particle"></div>
        <div class="particle"></div>
    </div>

    <div class="login-container">
        <div class="login-card">
            <!-- 登录头部 -->
            <div class="login-header">
                <div class="system-logo">
                    <i class="fas fa-boxes"></i>
                </div>
                <h1 class="system-title">资产管理系统</h1>
                <p class="system-subtitle">固定资产全生命周期管理平台</p>
            </div>

            <!-- 登录表单 -->
            <div class="login-form">
                <!-- 安全提示 -->
                <div class="security-notice">
                    <i class="fas fa-shield-alt"></i>
                    为了您的账户安全，请不要在公共设备上保存登录信息
                </div>

                {% if messages %}
                {% for message in messages %}
                <div class="alert alert-{{ message.tags }}">
                    <i class="fas fa-exclamation-triangle me-2"></i>
                    {{ message }}
                </div>
                {% endfor %}
                {% endif %}

                <form method="post" id="loginForm">
                    {% csrf_token %}
                    <div class="form-group">
                        <label for="username" class="form-label">
                            <i class="fas fa-user me-2"></i>用户名
                        </label>
                        <input type="text" class="form-control" id="username" name="username" placeholder="请输入用户名"
                            required autocomplete="username">
                        <div class="input-icon">
                            <i class="fas fa-user"></i>
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="password" class="form-label">
                            <i class="fas fa-lock me-2"></i>密码
                        </label>
                        <input type="password" class="form-control" id="password" name="password" placeholder="请输入密码"
                            required autocomplete="current-password">
                        <div class="input-icon">
                            <i class="fas fa-lock"></i>
                        </div>
                    </div>

                    <div class="remember-me">
                        <input type="checkbox" id="remember" name="remember">
                        <label for="remember">记住我</label>
                    </div>

                    <button type="submit" class="login-btn" id="loginBtn">
                        <div class="loading" id="loading"></div>
                        <span id="btnText">
                            <i class="fas fa-sign-in-alt me-2"></i>立即登录
                        </span>
                    </button>

                    <!-- 快速登录提示 -->
                    <div class="quick-login-hint">
                        <small class="text-muted">
                            <i class="fas fa-lightbulb me-1"></i>
                            提示：按 Enter 键快速登录，按 Esc 键清空表单
                        </small>
                    </div>
                </form>
            </div>
        </div>

        <!-- 页脚 -->
        <div class="login-footer">
            <p>&copy; 2025 固定资产管理系统. 保留所有权利.</p>
        </div>
    </div>

    <!-- JavaScript -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    <script src="{% static 'js/login.js' %}"></script>

    <!-- 登录页面监控脚本 -->
    <script src="{% static 'js/login-monitor.js' %}"></script>
</body>

</html>